<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<@_includePlace path="/d5acb7df-1e49-463a-a844-71ba3a784298.html"/> <#-- head-link -->
<@_includePlace path="/f43d7258-c013-4d19-acf2-6c10eebe3877.html"/> <#-- head-gis-link -->
	 <!--引入Datatable -->
<link href="inst\www\css\datatables.css" rel="stylesheet">
<script src="inst\www\js\datatables.js"></script>
		<style type="text/css">
				.dataTables_wrapper .dataTables_processing {
				  position: absolute;
				  top: 50%;
				  left: 50%;
				/*   width: 100%; */
				  width: 100px
				  height: 40px;
				  margin-left: -50%;
				  margin-left: auto;
				  margin-right: auto;
				  margin-top: -25px;
				  padding-top: 20px;
				  text-align: center;
				  font-size: 1.2em;
				/*   background-color: #ccc; */
				/*   background-color: white; */
				/*   background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0))); */
				/*   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); */
				/*   background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); */
				/*   background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); */
				/*   background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); */
				/*   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); */
				}
		   /*  tab样式  */
			  * {
					margin: 0;
					padding: 0;
				}
 
        .tabs {
            display: flex;
        }
 
        .tabs li {
            width: 100px;
            height: 40px;
			text-align:center;
            text-decoration: none;
            list-style-type: none;
            border: 1px solid #ccc;
            margin-left: 10px;
			margin-bottom:10px;
        }
 
        .tabs-box {
            width: 100%;
            
            height: 100%;
            display: none
        }
 
        .active {
            background-color: steelblue;
            color: #fff;
        }
 
        .boxOne {
            display: block;
        }

	</style>  
	    <title>PaleoMagnetism：${object.title}</title>
</head>
<body  oncontextmenu="return false;">
<@_includePlace path="/92779d2e-31c2-4642-9b47-49e74c160982.html"/> <#-- header -->
	
	  <div class="container">
			   <hr/>
		  <h3> Search Results  in <span  id='tablename'></span>  :  </h3>	 <br/>
		  
		   <ul class="tabs">
        <li class="active">DataTable</li>
		<li  id="tab-map">On Map</li>
		 <li>2D Density</li>	   
    </ul>
    <div class="boxs">
        <div class="tabs-box boxOne">
		     <table id="searchResult" class="table table-striped table-bordered" style="width:80%;">
     
       		 </table>
				<script>
				// //按键触发，屏蔽ctrl，预防ctrl+c 
				document.onkeydown = function () {
				  // 禁止ctrl按键的使用
				  if (event.ctrlKey) {
					window.event.returnValue = false;
					return false;
				  }
				}
			</script>
		</div>
		<div class="tabs-box">
<@_includePlace path="/72a58e2d-4a08-4cce-9977-7d117a89a21e.html"/> <#-- 回显点在图上位置 -->
		</div>
	
		<div class="tabs-box">
<@_includePlace path="/da1d57cd-577d-44ec-8830-b05ed09eba41.html"/> <#-- 二维核密度 -->
		</div>
    </div>
		
	
	
<@_includePlace path="/327d27dd-e079-48f3-896d-f2b8715531a6.html"/> <#-- footer -->
		  
		  
    <script src="${site.dynamicPath}resource/js/cms.analytics.js"></script>
    <script>
        var ca = cmsAnalytics();
        var url='${site.dynamicPath}api/visit/record';
        if("string" ==typeof itemString){
            url=url+"?"+itemString;
        }
        ca.report(url);
		
		 // Tab切换的代码
        $('.tabs li').on('click', function () {
            // 给当前选中的li添加一个选中的样式，除了点击当前的这个样式其他的删除样式
            $(this).addClass('active').siblings().removeClass('active');
            // 第一种写法
            // $('.boxs > div').hide().eq($('.tabs li').index(this)).show();
            // 第二种写法
            // siblings:除自己以外
            // 当前指向的上级父元素的下一个子元素的索引下标出现，让其他的消失
            $(this).parent().next().children().eq($(this).index()).css('display', 'block').siblings().css('display', 'none');
        })

	
			// dom加载完成后执行的函数
		$(document).ready(function(){
			 //从session中获取之前的设置字段
		    var ptlist=sessionStorage.getItem("polygon");
			var condition=sessionStorage.getItem("condition");
			var totalCount=  sessionStorage.getItem("totalcount"); 
			var	polygonCheck=	 sessionStorage.getItem("polygoncheck"); 
			var conditionCheck=  sessionStorage.getItem("conditioncheck"); 
			 var k_node = sessionStorage.getItem('k_node');
		     var owner=  sessionStorage.getItem('owner');
		     var scope =  sessionStorage.getItem('scope');
				if(sessionStorage.getItem("mycolumns")==null){
			  	   $.ajax(
				   {	 type: "get",        // 请求方式				   
						 url: "${site.dynamicPath}fastapi/kdata/"+k_node+"/"+owner,
						data:{'boundary':'','condition':'','scope':scope,'start':0,'length':3},
						dataType: "json",   // 预期返回一个 json 类型数据
						  success: function (data) { 
													
													   // data是形参名，代表返回的数据
												//处理返回数据
												/*var mycolumns =[];
												for(var i=0;i<data.columns.length;i++){
														mycolumns.push({'title':data.columns[i],'data':data.columns[i]});
												}*/
												//把列名存储到session
													   alert(data.columns);
												 sessionStorage.setItem("mycolumns",data.columns);
												 var totalCount=data.recordsTotal;
												 sessionStorage.setItem("totalcount",totalCount); 					
													  
											   //		     $("#resultCount").html('<p >find  <font color="#FF0000"> '+totalCount +' </font>  records.  <a href="/subject/result.html"><font color="#0000FF"> View the Results</a></font></p>');
												  }
										 });	
			
			
			
			}
			var	mycolumnslist=	 sessionStorage.getItem("mycolumns");
		
			 $('#tablename').text(k_node);
			var mycolumns =[];
			var mylist = mycolumnslist.split(',');
			var myColumnDefs=[];
			var hiddenColumns=['ref_all_authors'  ];  //需要隐藏的字段 
			//var hiddenColumns=['longitude','latitude','ref_all_authors'  ];  //需要隐藏的字段 
			var exportColumns=[];
			for(var i=0;i<mylist.length;i++){
					mycolumns.push({'title':mylist[i],'data':mylist[i]});
					//暂时屏蔽经纬度和参考文献
				   if(hiddenColumns.indexOf(mylist[i].toLowerCase())!=-1  ){
						   myColumnDefs.push({target:i,visible:false,searchable:false });
				   }else{
					     exportColumns.push({'title':mylist[i],'data':mylist[i],　"render": function ( data, type, row, meta ){ 
						    	if ( data===null || data==="") 
											return "" ;   
									   return type === 'display' && data.length > 20?'<span title="'+data+'">'+data.substr( 0, 16 )+'...</span>' :data;
							    } 
					    });
				   }
			}
			console.log("Hide ",myColumnDefs);
			
			
			if (polygonCheck == false )
				ptlist='';
			if (conditionCheck==false)
				condition='';
			//console.log(mycolumns);
		
			
			
			// 创建datatable
			$('#searchResult') .DataTable( {
						    "autoWidth":true,
							"pageLength":25,
							 "responsive": false,
							"processing": true,
							"serverSide": false,
						    "searching": true,
						    "ordering": true,
						     "scrollY":800,
						     "scrollX":1000,
				             columnDefs: myColumnDefs,
							"ajax":  {
								"type":"get",
								"url": "${site.dynamicPath!}fastapi/kdata/"+k_node+"/"+owner,
								"data": {'boundary':ptlist,'condition':condition,'scope':scope,'start':0,'length':totalCount}
							},
							/*dom: 'Blfrtip',
								   "buttons": [  
											{
												extend: 'excel',
												text:"Save...",
												messageTop: 'The copyright of the data you downloaded belongs to the DDE onepetroleum team. Please abide by the relevant DDE regulations and the team agreement when using the data, and please quote it from this website when publishing.<br>您下载的数据版权属于DDE-OnePetrology团队，请您在使用数据时遵守相关DDE的规定以及团队的约定，并请在发表时一定标注上引自于本网站。https://petrology.deep-time.org/',
											     action: function ( e, dt, node, config ) {
													//自定义事件，处理登录事宜
													 //判断是否登录
													 	var mycookie=$.cookie('dsAuthInfo');
														if(mycookie==null || mycookie==undefined || mycookie==""){
															//需要登录
															 var rtnUrl=window.location.pathname; 
			  			 									window.location.href='/login.html?returnUrl='+rtnUrl; 
															return true;
														}
													  $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config); //调用
											     },
											}
									   //'colvis'
								   ], */
							"columns":exportColumns,
						} ).on('xhr.dt', function ( e, settings, json, xhr ) {
							//数据到达后，console.log('data 到达',json);
				           // console.log('jsondata:',json.data);
							viewDataOnMap(json.columns,json.data);
						    setData2Density(json.columns,json.numbercolumns,json.data);
						} );
			// 创建结束
			
			//设置可以调整列宽？？？
		
			
		//  结束	
		});
		
		
		
    </script>
</body>
</html>